<script setup lang="ts">
import type { VideoPlayerProps } from '../../VideoPlayer'
import { Close } from '@element-plus/icons-vue'
import { ElIcon, ElOverlay } from 'element-plus'
import { ref, useAttrs } from 'vue'
import { VideoPlayer } from '../../VideoPlayer'

const props = defineProps<
  VideoPlayerProps & {
    show?: boolean
  }
>()

const emit = defineEmits<{
  (e: 'close'): void
}>()

const attrs = useAttrs()

const visible = ref(props.show)

async function close() {
  visible.value = false
  emit('close')
}
</script>

<template>
  <ElOverlay v-show="visible" @click="close">
    <div
      class="relative h-full w-full flex items-center justify-center"
      @click="close"
    >
      <div
        class="absolute right-40px top-40px h-44px w-44px flex cursor-pointer items-center justify-center border-[var(--el-border-color)] rounded-full bg-[var(--el-border-color)]"
        @click="close"
      >
        <ElIcon :size="24" class="color-[var(--el-text-color-regular)]">
          <Close />
        </ElIcon>
      </div>
      <VideoPlayer :type="type" :url="url" :poster="poster" v-bind="attrs" />
    </div>
  </ElOverlay>
</template>
